/**
 * 根据数据渲染主页banner
 */
import $ from "jquery";
import WheelPlant from "../../modules/banner/wheelPlant";

class IndexBanner{
    constructor(param){
        this.init.apply(this,arguments);
    }
    init(param){
        this.m_ulEle = $(param.ul);
        this.m_indsBox = $(param.inds);
        this.m_preBtn = $(param.pre);
        this.m_nextBtn = $(param.next);
        this.wheelPlant = null;
        this.getAjaxData();
    }
    getAjaxData(){
        $.ajax({
            url: "./server/parts/banner/index_banner.json",
            type: "GET",
            dataType: "json",
            success: $.proxy(this.render,this)
        });
    }
    render(res){
        let list = res.data,
        oriCnt = list.length,
        liStr = ``,
        indStr = ``,
        width = list[0].width;
        list.push(list[0]);

        // 渲染图片item
        $.each(list, (index,item)=>{
            liStr += `<li>
                <a href= "${item.lk}">
                    <img src= "${item.img}" width="${item.width}" height="${item.height}">
                </a>
            </li>`;
        })
        this.m_ulEle.html(liStr);
        this.m_ulEle.css({
            width: 100 * (oriCnt + 1) + "%"
        })

        // 下标
        for(let i = 0; i < oriCnt; i++){
            indStr += `<span></span>`;
        }
        this.m_indsBox.html(indStr);

        this.wheelPlant = new WheelPlant({
            target: this.m_ulEle,
            pageCnt: oriCnt + 1,
            pageWidth: width,
            indsList: this.m_indsBox.children(),
            indsName: "indicators_btn_active",
            isAuto: true,
            prevBtn: this.m_preBtn,
            nextBtn: this.m_nextBtn,
        });
        this.bindEvent();
    }
    bindEvent(){
        this.m_ulEle.parent()
        .mouseover(()=>{
            clearInterval(this.wheelPlant.m_timer);
        })
        .mouseout(()=>{
            this.wheelPlant.startAutoPlay();
        })
    }
}

module.exports = IndexBanner;